<template>
  <el-dialog
    title="公告"
    v-model="dialogVisible"
    :before-close="handleClose"
    :width="dialogWidth"
    :top="dialogTop"
  >
    <AsyncRenderMarkdownCpt
      v-if="frontendData"
      :md="frontendData.frontend.frontend_dialog_content"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, watch, onMounted, ref } from 'vue'
import { appStore } from '@/store/app'

import AsyncRenderMarkdownCpt from '@/components/RenderMarkdown/index.vue'

const store = appStore()
const dialogWidth = ref('500px')
const dialogTop = ref('30vh')
const dialogVisible = ref(false)
// const activities = ref([
//   {
//     content: '热门文章/最近更新切换',
//     timestamp: '2021-03-16'
//   },
//   {
//     content: '新增申请友链功能',
//     timestamp: '2021-03-03'
//   },
//   {
//     content: '新增qq登录功能',
//     timestamp: '2021-02-18'
//   }
//   {
//     content: "新增文章目录功能",
//     timestamp: "2021-02-10",
//   },
//   {
//     content: "新增访客模块",
//     timestamp: "2021-02-02",
//   },
// ])
const frontendData = computed(() => {
  return store.frontendData
})

watch(() => store.frontendData, () => {
  dialogVisible.value = store.frontendData ? store.frontendData.frontend.frontend_dialog === 1 : false
})

onMounted(() => {
  const d = window.pageXOffset || document.documentElement.offsetWidth
  if (d <= 414) {
    dialogWidth.value = '80%'
  }
})

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  overflow: hidden;
}
</style>
